<script lang="ts" setup>
import { PropType } from 'vue';
import { CardItemProps } from '../card/type';

const props = defineProps({
  appItem: {
    type: Object as PropType<CardItemProps>,
    required: true
  }
})
</script>

<template>
  <section :id="appItem.uuid" class="app-item">
    <div class="name">{{ appItem.name }}</div>
    <div class="capacity capacity-one">
      <div class="capacity-left">
        <div class="capacity-text">
          <div class="capacity-title">{{ appItem.capacitys[0].title }}</div>
          <span v-html="appItem.capacitys[0].desc" class="capacity-desc"></span>
        </div>
        <div class="capacity-detail">
          <div>
            <img src="" alt="">
            <span>语义理解</span>
          </div>
          <div>
            <img src="" alt="">
            <span>语言转换</span>
          </div>
          <div>
            <img src="" alt="">
            <span>逻辑推理</span>
          </div>
        </div>
      </div>
      <img src="" alt="">
    </div>
    <div class="capacitys">
      <div class="capacity capacity-two flex-1">
        <div class="capacity-title">{{ appItem.capacitys[1].title }}</div>
        <span v-html="appItem.capacitys[1].desc" class="capacity-desc"></span>
      </div>
      <div class="capacity capacity-three flex-1">
        <div class="capacity-title">{{ appItem.capacitys[2].title }}</div>
        <span v-html="appItem.capacitys[2].desc" class="capacity-desc"></span>
      </div>
    </div>

    <!-- 按钮 -->
    <a 
      :href="appItem.path" 
      target="_blank" 
      class="flex justify-center mt-16 button-container"
    >
      <button class="w-40 px-3 cursor-pointer text-red-500 text-center flex items-center justify-center border border-red-500 
        border-solid p-2 rounded-full hover:shadow-[0_8px_20px_0_rgba(219,180,188,0.3)] duration-300 ease-in-out">
        <span class="mr-2">立即体验</span>
        <el-icon><ArrowRight /></el-icon>
      </button>
    </a>
  </section>
</template>

<style lang="scss" scoped>
  .app-item {
    font-family: PingFang SC, PingFang SC;
    margin-bottom: 80px;
    .name {
      text-align: center;
      margin-bottom: 20px;
      color: #242424;
      font-size: 40px;
    }
    .capacitys {
      display: flex;
      gap: 16px;
      .flex-1 {
        flex: 1;
      }
    }
    .capacity {
      background-color: white;
      border-radius: 10px;
      padding-top: 124px;
      padding-left: 80px;
      padding-bottom: 184px;
      margin-top: 16px;
      .capacity-title {
        margin-bottom: 32px;
        font-size: 32px;
      }
      .capacity-desc {
        font-size: 20px;
        color: #8C8C8C;
        line-height: 2;
      }
    }
    .capacity-one {
      flex: 1;
      background: linear-gradient( 180deg, #add3ec 0%, #bad3fa 100%), linear-gradient( 3deg, #aacbf1 0%, #b6d4f3 100%), radial-gradient( 70% 87% at 31% 49%, #C9EFFE 0%, rgba(201,239,254,0) 100%), #FFFFFF;
      .capacity-left {
        width: 40%;
      }
      
    }
    .button-container {
      margin-top: 30px;
      display: flex;
      justify-content: center;
      button {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-family: semibold;
        border-radius: 50px;
        padding: 10px 20px;
        border: 1px solid #DC291C;
        color: #FF4C60;
        transition: all .3s ease-in-out;
        background: transparent;
        span {
          margin-right: 10px;
        }
        &:hover {
          // background-color: #FF4C60;
          // color: white;
          box-shadow: 2px 8px 20px 0 rgba(219,180,188,0.3);
        }
      }
    }
  }
</style>
